<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>银杏网盘 - 我的文件</title>
    <!-- 引入 Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <!-- 引入 Tailwind -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1a56db', // 主色调：深蓝色
                        secondary: '#065f46', // 辅助色：深绿色
                        neutral: {
                            100: '#f3f4f6',
                            200: '#e5e7eb',
                            300: '#d1d5db',
                            700: '#374151',
                            800: '#1f2937',
                            900: '#111827'
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
                        'card-hover': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .animate-fade-in {
                animation: fadeIn 0.3s ease-in-out;
            }
            .animate-slide-in {
                animation: slideIn 0.3s ease-out;
            }
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
            @keyframes slideIn {
                from { transform: translateY(10px); opacity: 0; }
                to { transform: translateY(0); opacity: 1; }
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <header class="bg-white shadow-md sticky top-0 z-50 transition-all duration-300" id="header">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-3">
                <div class="text-primary text-2xl">
                    <i class="fa fa-server"></i>
                </div>
                <div>
                    <h1 class="text-xl font-bold text-neutral-800">银杏网盘</h1>
                </div>
            </div>
            <div class="flex items-center space-x-3">
                <div class="text-primary text-2xl">
                    <i class="fa fa-user-circle"></i>
                </div>
                <div class="text-neutral-800">
                    <span th:text="${username}"></span>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-6">
        <!-- 面包屑导航 -->
        <div class="mb-6 bg-white rounded-lg shadow-sm p-4 animate-fade-in">
            <nav class="flex">
                <ol class="inline-flex items-center space-x-2">
                    <li th:each="path : ${pathList}" class="inline-flex items-center text-sm font-medium text-neutral-700">
                        <span th:text="${path} + ' /'"></span>
                    </li>
                </ol>
            </nav>
        </div>
        <div class="bg-white rounded-xl shadow-card overflow-hidden animate-slide-in">
            <div class="p-4 border-b border-neutral-200 flex justify-between items-center">
                <h3 class="font-bold text-lg text-neutral-800">文件列表</h3>
                <div class="p-2 flex justify-between items-center">
                    <button id="create-folder" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
                        <i class="fa fa-plus"></i>
                        创建文件夹
                    </button>
                    <button id="refresh" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
                        <i class="fa fa-sync"></i>
                    </button>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-sm text-left">
                    <thead class="bg-neutral-50 text-neutral-600">
                    <tr>
                        <th class="px-6 py-3 font-medium">名称</th>
                        <th class="px-6 py-3 font-medium hidden md:table-cell">修改日期</th>
                        <th class="px-6 py-3 font-medium hidden sm:table-cell">大小</th>
                        <th class="px-6 py-3 font-medium text-right">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- 上级目录 -->
                    <tr th:unless="${isRoot}" class="hover:bg-neutral-50 transition-colors duration-150">
                        <td class="px-6 py-4">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center mr-3">
                                    <i class="fa fa-level-up text-primary"></i>
                                </div>
                                <a id="backword" class="font-medium text-primary hover:underline">
                                    ..
                                </a>
                            </div>
                        </td>
                        <td class="px-6 py-4 hidden md:table-cell">
                            <span class="text-neutral-500">--</span>
                        </td>
                        <td class="px-6 py-4 hidden sm:table-cell">
                            <span class="text-neutral-500">--</span>
                        </td>
                        <td class="px-6 py-4 hidden sm:table-cell">
                            <span class="text-neutral-500">--</span>
                        </td>
                    </tr>
                    <!-- 文件列表 -->
                    <tr th:each="file : ${fileList}" class="hover:bg-neutral-50 transition-colors duration-150">
                        <td class="px-6 py-4">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center mr-3">
                                    <i th:class="${file.type == 'folder' ? 'fa fa-folder' : 'fa fa-file'}" class="text-primary"></i>
                                </div>
                                <span th:if="${file.type == 'file'}" th:text="${file.name}"></span>
                                <a th:if="${file.type == 'folder'}" th:href="${file.name}" th:text="${file.name}" class="forward"></a>
                            </div>
                        </td>
                        <td>
                            <span th:text="${#dates.format(file.uploadTime, 'yyyy-MM-dd HH:mm')}"></span>
                        </td>
                        <td class="hidden sm:table-cell">
                            <!-- 文件大小，不满 1 MB 单位为 KB，否则单位为 MB -->
                            <span th:if="${file.type == 'file'}" th:text="${file.size < 1024 * 1024 ? #numbers.formatDecimal(file.size / 1024, 1, 2) + ' KB' : #numbers.formatDecimal(file.size / 1024 / 1024, 1, 2) + ' MB'}"></span>
                            <span th:if="${file.type == 'folder'}" class="text-neutral-500">--</span>
                        </td>
                        <td class="px-6 py-4 text-right">
                            <a th:if="${file.type == 'file'}" th:href="${file.name}" class="download hover:text-blue-500 transition-colors duration-300">
                                <i class="fa fa-download"></i>
                            </a>
                            <a th:href="${file.name}" class="delete hover:text-red-500 transition-colors duration-300">
                                <i class="fa fa-trash"></i>
                            </a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 文件上传区域 -->
        <div class="mb-6 bg-white rounded-xl shadow-card p-6 animate-fade-in">
            <h3 class="font-bold text-lg text-neutral-800 mb-4">上传文件</h3>

            <div id="upload-area" class="border-2 border-dashed border-neutral-300 rounded-lg p-8 text-center hover:border-primary transition-colors duration-200 cursor-pointer bg-neutral-50">
                <input type="file" id="file-input" class="hidden" multiple />
                <button id="browse-files" class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
                    <i class="fa fa-folder-open mr-2"></i>
                    浏览文件
                </button>
            </div>
        </div>
        <!-- 确认删除模态框 -->
        <div id="deleteModal" class="fixed inset-0 z-50 hidden bg-black bg-opacity-50">
            <div class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg p-8 shadow-2xl max-w-md w-full animate-fade-in">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-bold text-neutral-800">确认删除</h3>
                    <button id="closeDeleteModal" class="text-2xl text-neutral-500 hover:text-neutral-700 cursor-pointer">×</button>
                </div>
                <p class="text-neutral-700 mb-4">您确定要删除此文件吗？</p>
                <div class="flex justify-end">
                    <button id="cancelDeleteBtn" class="px-4 py-2 bg-neutral-200 text-neutral-800 rounded-lg mr-2 hover:bg-neutral-300 transition-colors">
                        取消
                    </button>
                    <button id="confirmDeleteBtn" class="px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors shadow-md hover:shadow-lg">
                        确认删除
                    </button>
                </div>
                <div class="hidden">
                    <span id="fileToDelete"></span>
                </div>
            </div>
        </div>
        <!-- 创建文件夹模态框 -->
        <div id="createFolderModal" class="fixed inset-0 z-50 hidden bg-black bg-opacity-50">
            <div class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg p-8 shadow-2xl max-w-md w-full animate-fade-in">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-bold text-neutral-800">新建文件夹</h3>
                    <button id="closeModal" class="text-2xl text-neutral-500 hover:text-neutral-700 cursor-pointer">×</button>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-neutral-700 mb-2">文件夹名称：</label>
                    <input type="text" id="folderName"
                           class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:border-primary text-neutral-800"
                           placeholder="请输入文件夹名称"
                           pattern="^[^\x2f]*$"
                    required>
                    <div id="nameError" class="text-red-500 text-sm hidden mt-1">
                        文件夹名称不能包含特殊字符且不能为空
                    </div>
                </div>
                <div class="flex justify-end">
                    <button id="cancelBtn" class="px-4 py-2 bg-neutral-200 text-neutral-800 rounded-lg mr-2 hover:bg-neutral-300 transition-colors">
                        取消
                    </button>
                    <button id="createBtn" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-md hover:shadow-lg">
                        确定创建
                    </button>
                </div>
            </div>
        </div>
    </main>
    <script src="js/file.js"></script>
</body>
</html>